import React from 'react';
import { PopConfirm, Button } from '@teamix/ui';
import { hasCachedRepoId, setCachedRepoId } from 'utils/repoIdCache';
import intl from '../../locale';

const autoFixVisited = 'auto_fix_visited';
export default class AutoFixConfirm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 第一次进入出现提示
      visible: !hasCachedRepoId(autoFixVisited, 'user'),
    };
  }

  onCancel = () => {
    this.setState({
      visible: false,
    });

    setCachedRepoId(autoFixVisited, 'user');
  };

  onVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render() {
    const { trigger, isNeedConfrim } = this.props;
    const { visible } = this.state;

    if (!isNeedConfrim) {
      return trigger;
    }
    return (
      <PopConfirm
        triggerType="click"
        align="t"
        title=""
        content={
          <div className="autofix-help-container">
            <div>
              {intl.get({
                id: 'code-assets.components.dependencyBuildIssuesList.autoFIxConfirm.SupportsAutomaticVulnerabilityFixingWith',
                defaultMessage: '支持一键自动修复漏洞，快去试试吧！',
              })}
            </div>
            <div className="autofix-help-footer">
              <Button size="xs" type="primary" onClick={this.onCancel}>
                {intl.get({
                  id: 'code-assets.components.dependencyBuildIssuesList.autoFIxConfirm.ISee',
                  defaultMessage: '我知道了',
                })}
              </Button>
            </div>
          </div>
        }
        visible={visible}
        onVisibleChange={this.onVisibleChange}
        footer={false}
        trigger={trigger}
      />
    );
  }
}
